<template>
  <el-table :data="props.cats" stripe style="width: 100%" @row-click="emit('click', $event)">
    <el-table-column prop="name" label="名字" />
    <el-table-column prop="color" label="花色" />
    <el-table-column prop="sex" label="性别" />
    <!-- <el-table-column prop="homeName" :label="petTypeName" /> -->
    <el-table-column prop="host" label="主人" />
  </el-table>
</template>

<script setup lang="ts">
import { ElTable, ElTableColumn } from "element-plus";
import { ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const petTypeName = ref("猫舍");

if (route.query.petType) {
  petTypeName.value = route.query.petType as string;
}

const props = defineProps({
  cats: Array,
});

const emit = defineEmits(["click"]);
</script>
